<!-- 我的页面 -->
<style scoped>
.big {
    width: 100%;
    height: auto;
    background-color: #f4f4f4;
}

.top {
    background-image: url("../assets/001.jpg");
    background-size: 100% 40vh;
    background-repeat: no-repeat;
    height: 40vh;
}

.top-title {
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 1.5vh;
}

.title-left {
    display: flex;
    padding-left: 2vh;
    padding-top: 5vh;
    align-items: center;
}

.le-img {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
}

.right-bold {
    font-weight: 600;
}

.title-right {
    padding-left: 2vh;
}

.ren {
    font-size: 12px;
    padding-top: 1.5vh;
}

.right-bold {
    font-size: 13px;
}

.biao {
    display: flex;
    flex-direction: column;
    padding-left: 4.5vh;
    padding-top: 8.5vh;
}

.biao-top {
    font-size: 16px;
    font-weight: 500;
}

.biao-bottom {
    font-size: 11px;
}

/* 底部导航栏 */
.child {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    height: 8vh;
    background-color: white;
    justify-content: space-around;
    font-size: 12px;
}

.child-child {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.child-child-img {
    width: 20px;
    height: 20px;
}

/* 浏览记录 */
.line {
    width: 50%;
    height: 1px;
    position: absolute;
    margin-left: 25%;
    background-color: rgba(229, 229, 229, 1);
}

.lis-child img {
    width: 5vh;
    height: 5vh;
}

.lis {
    width: 100%;
    align-items: center;
    justify-content: space-around;
    display: flex;
    background-color: rgba(255, 255, 255, 1);
    padding-top: 1.5vh;
    padding-bottom: 1.5vh;
}

.lis-child {
    display: flex;
    flex-direction: column;
    width: 20%;
    align-items: center;
}

.liu {
    font-size: 13px;
    padding-top: 1vh;
}

.las {
    padding-top: 1.5vh;
}

/* <!-- 中间部分我的团队 --> */
.da {
    display: flex;
    align-items: center;
    font-weight: 800;
    justify-content: space-around;
    margin-top: 1.5vh;
    width: 96%;
    margin-left: 2%;
}

.da-left {
    display: flex;
    border-radius: 10px;
    width: 48%;
    padding-bottom: 1.5vh;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    padding-top: 1.5vh;
}

.da-left-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vbn {
    width: 8vh;
    height: 8vh;
}

.da-right {
    display: flex;
    border-radius: 10px;
    width: 48%;
    padding-bottom: 1.5vh;
    justify-content: space-around;
    align-items: center;
    background-color: white;
    padding-top: 1.5vh;
}

/* <!-- 其他服务 --> */
.lit-child img {
    width: 4vh;
    height: 4vh;
}

.lit {
    width: 94%;
    margin: 0 auto;
    background-color: white;
    border-radius: 5px;
    margin-top: 1vh;
    padding-bottom: 2vh;
    padding-top: 2vh;
}

.lit-title {
    font-weight: 600;
    padding-bottom: 1.5vh;
    font-size: 13px;
    padding-left: 1.5vh;
}

.da-da {
    font-size: 13px;
}

.lit-child {
    width: 25%;
    display: flex;
    flex-direction: column;
    padding-top: 1vh;
    padding-bottom: 1vh;
    align-items: center;
    font-size: 12px;
    color: rgba(80, 80, 80, 1);
}

.lit-lit {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
}

.ggg {
    padding-top: 0.5vh;
}

/* <!-- 推荐攻略 --> */
.tui {
    display: flex;
    align-items: center;
    border-radius: 5px;
    margin-top: 5px;
    background-color: white;
    padding-left: 1vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-right: 1vh;
    justify-content: space-between;
}

.tui-left {
    align-items: center;
    display: flex;
}

.tui-right {
    display: flex;
    align-items: center;
    height: 3vh;
    width: auto;
    justify-content: center;
    padding-left: 1vh;
}

.tui-left img {
    width: 20px;
    height: 20px;
}

.right-zi {
    font-size: 11px;
}

.tui-right img {
    width: 15px;
    height: 15px;
}

.left-zi {
    padding-left: 0.5vh;
    font-size: 12px;
    font-weight: 600;
}

.fff {
    width: 50%;
    background-color: aqua;
}

/* 攻略发布人员的名字 */
.long {
    padding-left: 1vh;
}

.child {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100%;
    align-items: center;
    height: 8vh;
    background-color: white;
    justify-content: space-around;
    font-size: 12px;
}

.child-child {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.child-child-img {
    width: 20px;
    height: 20px;
}

.rocket {
    width: 5vh;
    height: 5vh;
    z-index: 9999;
}

.backo {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    margin-top: -5vh;
    position: absolute;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 1);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -5vh;

}

.child-right {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 20px;
    width: 60%;
}

.pb {
    column-count: 2;
    column-gap: 0vh;
    padding-top: 10px;
    padding-left: 2%;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 20vh;
}

.pu-one {
    direction: ltr;
    width: 96%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.pu-two {
    direction: ltr;
    width: 96%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    break-inside: avoid;
}

.jie-bottom_child {
    width: 50%;
    display: flex;
}

.l {
    margin: 0 5px;
}

.one-img {
    width: 100%;
    border-radius: 5px;
}

.two-img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    height: 25vh;
}

.jie-bottom {
    display: flex;
    justify-content: space-between;
    padding-left: 0.5vh;
    font-size: 11px;
    font-weight: 300;
    padding-right: 0.5vh;
    padding-top: 0.8vh;
}

.jie {
    display: flex;
    flex-direction: column;
    background-color: white;
    margin-top: -0.5vh;
    padding: 5px 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.jie-top {
    font-size: 14px;
    font-weight: 600;
}

.jie img {
    width: 12px;
    height: 12px;
}

.pu-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 95%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    padding-right: 1vh;
}

.user-left {
    display: flex;
    align-items: center;
}

.user-left img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.user-right {
    display: flex;
    font-size: 13px;
    align-items: center;
}


.df {
    width: 15px;
    height: 15px;
    margin-right: 5px;
}

.pu_one {
    width: 48%;
    flex-direction: column;
    display: flex;
    break-inside: avoid;
    flex-direction: column;
}

.pu_one-img {
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.pu-ping {
    font-size: 13px;
    padding-top: 1vh;
}

.pu-div {
    display: flex;
    flex-direction: column;
    background-color: white;
    padding-left: 1vh;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.user-left div {
    font-size: 10px;
    color: #828282;
    padding-left: 1vh;
}

.pu_two {
    width: 96%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.two_img {
    width: 100%;
    border-radius: 5px;
}

.pu_five {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_six {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_four {
    display: flex;
    flex-direction: column;
    width: 48%;
    break-inside: avoid
}

.pu_three {
    width: 48%;
    display: flex;
    break-inside: avoid;
    flex-direction: column;

}

.pu_et {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.pu_sen {
    width: 48%;
    break-inside: avoid;
    display: flex;
    flex-direction: column;
}

.rocket {
    width: 5vh;
    height: 5vh;
    z-index: 9999;

}

.backo {
    width: 8vh;
    height: 8vh;
    border-radius: 50%;
    margin-top: -5vh;
    position: absolute;
    box-shadow: 0px 0px 11px 0px rgba(229, 229, 229, 1);
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -34px;
    /* transform: translateY(0px); */
}

.backo img {
    width: 50px;
    height: 50px;
    position: absolute;
}
</style>

<template>
    <div class="big">
        <!-- 上部 -->
        <div class="top">
            <div class="top-title">我的</div>
            <div class="title-left">
                <img src="../assets/640 (58).jpg" alt="" class="le-img" />
                <div class="title-right">
                    <div class="right-bold">dys</div>
                    <div class="ren">推荐人：&nbsp;席大大</div>
                </div>
            </div>
            <div class="biao">
                <div class="biao-top">
                    旅游达人
                </div>
                <div class="biao-bottom">
                    畅行一路通，出游最轻松
                </div>
            </div>
        </div>

        <!-- 浏览记录 -->
        <div class="line"></div>
        <div class="lis">
            <div class="lis-child">
                <img src="../assets/qqqq.png" alt="" />
                <div class="liu">浏览记录</div>
            </div>
            <div class="lis-child">
                <img src="../assets/wwww.png" alt="" />
                <div class="liu">我的奖品</div>
            </div>
            <div class="lis-child" @click="order">
                <img src="../assets/eeee.png" alt="" />
                <div class="liu">我的订单</div>
            </div>
            <div class="lis-child">
                <img src="../assets/rrrr.png" alt="" />
                <div class="liu">推广信息</div>
            </div>
            <div class="lis-child">
                <img src="../assets/tttt.png" alt="" />
                <div class="liu">推广码</div>
            </div>
        </div>
        <!-- 中间部分 -->
        <div class="da">
            <div class="da-left">
                <div class="da-left-left">
                    <div class="da-da">我的团队</div>
                    <div class="las">0</div>
                </div>
                <img src="../assets/help.png" alt="" class="vbn" />
            </div>
            <div class="da-right">
                <div class="da-left-left">
                    <div class="da-da">收益</div>
                    <div class="las">0</div>
                </div>
                <img src="../assets/llllll.png" alt="" class="vbn" />

            </div>
        </div>
        <div class="lit">
            <div class="lit-title">
                其他服务
            </div>
            <div class="lit-lit">
                <div class="lit-child">
                    <img src="../assets/az.png" alt="" />
                    <div class="ggg">收藏记录</div>
                </div>
                <div class="lit-child">
                    <img src="../assets/sz.png" alt="" />
                    <div class="ggg">点赞记录</div>
                </div>
                <div class="lit-child">
                    <img src="../assets/dz.png" alt="" />
                    <div class="ggg">在线客服</div>
                </div>
                <div class="lit-child" @click="realname">
                    <img src="../assets/fz.png" alt="" />
                    <div class="ggg">实名认证</div>
                </div>
                <div class="lit-child">
                    <img src="../assets/gz.png" alt="" />
                    <div class="ggg">已取消</div>
                </div>
                <div class="lit-child">
                    <img src="../assets/hz.png" alt="" />
                    <div class="ggg">待付款</div>
                </div>
                <div class="lit-child">
                    <img src="../assets/jz.png" alt="" />
                    <div class="ggg">已退款</div>
                </div>
                <div class="lit-child">
                    <img src="../assets/kz.png" alt="" />
                    <div class="ggg">待评价</div>
                </div>
            </div>
        </div>
        <!-- 推荐攻略 -->
        <div class="tui">
            <div class="tui-left">
                <div class="left-zi">我的攻略</div>
            </div>
            <div class="tui-right">
                <div class="right-zi">
                    全部攻略
                </div>
                <img src="../assets/right.png" alt="" />
            </div>
        </div>
        <!-- 攻略渲染 -->
        <div class="pb">
            <div class="pu_two" v-for="(item, index) in swim" :key="item.id" onclick="detail_you()">
                <img :src="`https://wwz.jingyi.icu${item.cover}`" alt="" class="pu_one-img" />
                <div class="pu-div">
                    <div class="pu-ping">
                        {{ item.title }}
                    </div>
                    <div class="pu-user">
                        <div class="user-left">
                            <img :src="`https://wwz.jingyi.icu${item.avatar}`" alt="" class="gh_one" />
                            <div>{{ item.name }}</div>
                        </div>
                        <div class="user-right">
                            <img src="../assets/love.png" alt="" class="df" />
                            <div>{{ item.number == null ? '8' : item.number }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部导航栏 -->
        <div class="child">
            <div class="child-child" @click="home">
                <img src="../assets/home2.png" alt="" class="child-child-img" />
                <div>首页</div>
            </div>
            <div class="child-child" @click="Strategy_jump">
                <img src="../assets/iii.svg" alt="" class="child-child-img" />
                <div>攻略</div>
            </div>
            <div class="child-child">
                <transition name="rocket">
                    <div class="backo" v-if="showRocket">
                        <!-- 这里原本可能有一些内容，比如火箭的图片 -->
                        <img src="../assets/xhj.png" @click="launchRocket" class="rockett" alt="Rocket">
                    </div>
                </transition>
                <img src="../assets/fa.png" alt="" class="child-child-img" />
                <div>发布</div>
            </div>
            <div class="child-child" @click="ranking">
                <img src="../assets/kkk.png" alt="" class="child-child-img" />
                <div>排行榜</div>
            </div>
            <div class="child-child" onclick="my()">
                <img src="../assets/mys.png" alt="" class="child-child-img" />
                <div style="color: red;">我的</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch, computed } from "vue";
import { NoticeBar } from "vant";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
import { travels } from '../api/travels'
const showRocket = ref(true); // 控制火箭是否显示的变量 
// 请求游记接口
const swim = ref([])
travels().then((res) => {
    console.log(res, '游记接口')
    swim.value = res.data
    console.log(swim.value);
})
// 跳转到首页
const home = () => {
    router.push({
        name: "home",
    });
}
// 跳转到攻略
const Strategy_jump = () => {
    router.push({
        name: "Strategy",
    });
}
// 跳转到排行榜
const ranking = () => {
    router.push({
        name: "list",
    });
}
// 跳转到实名认证
const realname = () => {
    router.push({
        name: "realname",
    });
}
// 跳转到我的订单页面
const order = () => {
    router.push({
        name: "me_order",
    });
}
// 定义方法  
const launchRocket = () => {
    // 开始动画  
    showRocket.value = false; // 通过改变数据触发过渡效果  
    // 延迟 1 秒后跳转至 Login 组件（注意：通常我们不会直接跳转到 .vue 文件，而是使用 Vue Router）  
    setTimeout(() => {
        router.push('/review') 
        // 假设你使用了 Vue Router，这里的逻辑需要替换为你实际的导航逻辑  
        // 例如，你可以使用 router.push('/login')  
        // 假设你没有使用 Vue Router，你可能需要继续使用 window.location，但这并不是 Vue 的标准做法  
        window.location.href = '/review'; // 注意这里通常是 URL 路径，而不是 .vue 文件  
    }, 1000); // 假设过渡效果在 1 秒内完成  
};
// 如果有需要，可以在这里添加生命周期钩子  
// 例如，onMounted 会在组件挂载后执行  
onMounted(() => {
    // 组件挂载后的代码  
});
</script>
